<template>
  <div style="height: 100%; width: 100%; position: relative">
    <div class="pagetop">
      <template>
        <div style="width: 100%">
          <div style="float: left; width: 50%">
            <table style="font-size: 12px" class="table1style">
              <tr>
                <td>快速查询</td>
                <td>
                  <el-input v-model="txtsearch" placeholder="地址" style="width: 350px" @input="specifiName($event)"
                    clearable></el-input>
                </td>
              </tr>
            </table>
          </div>
          <div style="float: left; width: 50%">
            <table style="float: right">
              <tr>
                <td>
                  <el-button type="primary" @click="btnRefresh" icon="el-icon-search" v-has="'PINQUERY'">查询</el-button>
                </td>
                <td>
                  <el-button @click="btnAdd" icon="el-icon-plus" v-has="'PADD'">新增</el-button>
                </td>
                <td>
                  <el-button @click="btnDelete" icon="el-icon-delete" v-has="'PDELETE'">删除</el-button>
                </td>
                <td>
                  <el-button @click="SaveRecord" icon="el-icon-document">保存</el-button>
                </td>
                <!-- <td>
                                  <el-button @click="syncdata" icon="el-icon-position" v-has="'PSYNC'">同步</el-button>
                              </td>

                              <td>
                                  <el-button @click="RecordExport" icon="el-icon-download" v-has="'PEXPORT'">导出</el-button>
                              </td> -->
              </tr>
            </table>
          </div>
        </div>
      </template>
    </div>
    <div class="pagecenter">
      <div class="middle-center" style="height: 100%">
        <vxe-table :loading="loading" :data.sync="tableData" :row-class-name="rowClassName" border fit
          :mouse-config="{ selected: true }"
          :edit-config="{ trigger: 'click', mode: 'cell', activeMethod: activeMethod, showStatus: true, showIcon: false }"
          @edit-actived="CellActive" :keyboard-config="keyConfig" height="auto" header-align="center"
          highlight-current-row highlight-hover-row ref="xTable" resizable show-header-overflow="tooltip"
          show-overflow="tooltip" size="mini" stripe @edit-closed="EditChange">
          <vxe-table-column type="index" title="NO." width="40" align="center"></vxe-table-column>
          <vxe-table-column field="address" title="网站访问地址" width="200" :edit-render="{ name: 'input', autoselect: true }"
            sortable> </vxe-table-column>
          <vxe-table-column field="invalidflag" title="有效" width="40" align="center" sortable>
            <template v-slot="{ row }">
              <el-checkbox v-model="row.invalidflag" true-label="1" false-label="0"></el-checkbox>
            </template>
          </vxe-table-column>
          <vxe-table-column field="adduser" title="增加/修改人" width="120" sortable></vxe-table-column>
          <vxe-table-column field="last_dt" title="最后修改时间" width="120" sortable></vxe-table-column>
          <vxe-table-column title="测试连接" width="70px" align="center">
            <template v-slot="{ row }">
              <!-- <el-button class="el-button--310" style="padding: 5px 10px !important;" @click="childrenDeal(row)">删除</el-button> -->
              <i class="el-icon-thumb" style="padding: 5px 10px !important" @click="testEvent(row)"></i>
            </template>
          </vxe-table-column>
        </vxe-table>
      </div>
    </div>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span><span class="el-icon-info">确定删除网站访问地址为<b style="color: red">{{ message }}</b>的记录吗？</span></span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="SubmitDel">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
import axios from "axios";
export default {
  name: "MNG197",
  data() {
    return {
      tableData: [],
      tableData1: [],
      message: "",
      selectrow: [],
      curselectrow: "",
      actionindex: 0,
      tempindex: 0,
      loading: false,
      dialogVisible: false,
      ishsow: false,
      okFirstLoading: true,
      selectConfig: { tigger: "row" },
      keyConfig: {
        isArrow: true,
        isDel: true,
        isTab: true,
        isEdit: true,
      },
      txtsearch: "",
    };
  },
  computed: {},
  created() {
    this.InitPage(); //初始化主列表
  },
  mounted() { },

  updated() {
    if (this.okFirstLoading) {
      let currentrow = "";
      if (this.actionindex != 0) {
        //新增，修改，删除
        if (this.actionindex == 3) {
          //如果是删除
          if (this.tempindex > 0) {
            currentrow = this.$refs.xTable.getData(this.tempindex);
          } else {
            currentrow = this.$refs.xTable.getData(0);
          }
        } else {
          //新增或修改
          if (this.curselectrow && this.curselectrow != "") {
            this.$nextTick(() => {
              let row = this.curselectrow;
              var alld = this.$refs.xTable.tableData;
              for (var i = 0; i < alld.length; i++) {
                if (alld[i].codeno == row.codeno) {
                  this.tempindex = i;
                  break;
                }
              }
              currentrow = this.$refs.xTable.getData(this.tempindex);
            });
          } else {
            currentrow = this.$refs.xTable.getData(0);
          }
        }
      } else {
        //查询
        currentrow = this.$refs.xTable.getData(0);
        this.actionindex = 2;
        this.curselectrow = currentrow;
      }
      this.$nextTick(() => {
        if (currentrow) {
          this.okFirstLoading = false;
          this.$refs.xTable.setCurrentRow(currentrow);
          this.message = currentrow.codena;
        }
      });
    }
  },
  methods: {
    InitPage() {
      this.loading = true;
      this.$tool
        .request({
          url: "MNG/MNG1/MNG197",
          method: "post",
          data: {
            action: "query",
          },
        })
        .then((res) => {
          this.tableData = res.data.Data;
          this.loading = false;
          this.okFirstLoading = true;
        })
        .catch((e) => {
          console.log("error", e);
        });
    },
    btnRefresh() {
      this.InitPage();
    },
    activeMethod({ row, column }) {
      if (column.property == "securityflag") {
        return false;
      } else {
        return true;
      }
    },
    rowClassName({ row, rowIndex }) {
      let isDirty = this.$refs.xTable.hasRowChange(row);
      if (isDirty) {
        return "row-modify";
      }
      if (this.$refs.xTable.hasRowInsert(row)) return "row-new";
    },
    currentChangeEvent({ row, $rowIndex }) {
      this.message = row.codena;
      this.actionindex = 2; //修改
      this.tempindex = $rowIndex;
      this.curselectrow = row;
    },
    btnAdd() {
      let initdata = {
        address: "",
        validflag: "1",
        adduser: "",
        lastdt: "",
      };
      this.$refs.xTable.insert(initdata).then(({ row }) => {
        this.$refs.xTable.setCurrentRow(row);
        this.$refs.xTable.setActiveRow(row, "address");
      });
      this.actionindex = 1; //增加
      this.FunscrollY();
    },
    FunscrollY() {
      this.$nextTick(() => {
        var alldataLen = this.$refs.xTable.tableData.length;
        let L = this.$refs.xTable.getTableData().fullData[alldataLen - 1];
        this.$refs.xTable.scrollToRow(L);
      });
    },
    btnDelete() {
      let delrow = this.$refs.xTable.getCurrentRow();
      this.message = delrow.address;
      this.dialogVisible = true;
    },
    SubmitDel() {
      let delrow = this.$refs.xTable.getCurrentRow();
      if (delrow) {
        var alld = this.$refs.xTable.tableData;
        var rowindex = alld.indexOf(delrow);
        this.$refs.xTable.remove(delrow);
        this.actionindex = 3; //删除
        let havedata = this.$refs.xTable.tableData;
        if (havedata.length > 0) {
          if (rowindex >= havedata.length) rowindex = havedata.length - 1;
          this.tempindex = rowindex;
          let selectrow = havedata[rowindex];
          this.$refs.xTable.setCurrentRow(selectrow);
          this.message = selectrow.address;
        }
      } else {
        this.$message({
          message: "请选择要删除的记录！",
          type: "warning",
        });
      }
      this.dialogVisible = false;
      this.SaveRecord();
    },

    SaveRecord() {
      let tabledata = this.$refs.xTable.getRecordset();
      if (tabledata.insertRecords.length > 0) {
        this.curselectrow = tabledata.insertRecords[0];
      }
      this.$tool
        .request({
          url: "MNG/MNG1/MNG197",
          method: "post",
          data: {
            action: "save",
            urec: tabledata,
          },
        })
        .then((response) => {
          if (response.errcode == "1") {
            this.$message({
              message: "操作成功！",
              type: "success",
            });
            this.InitPage();
          } else {
            this.$message({
              message: "保存失败！" + response.errmsg,
              type: "warning",
            });
          }
        });
    },

    CellActive({ row, rowIndex, column }) {
      this.actionindex = 2; //修改
      let len = this.$refs.xTable.tableData.length;
      if (rowIndex + 1 >= len) {
        if (row.codeno === null) {
          this.$refs.xTable.setCurrentRow(row);
          this.actionindex = 1; //新增
          this.tempindex = this.$refs.xTable.getRowIndex(row);
        }
      }
    },

    specifiName(e) {
      if (e == null || e == "") {
        this.btnRefresh();
      } else {
        this.$tool
          .request({
            url: "MNG/MNG1/MNG197",
            method: "post",
            data: {
              action: "query",
            },
          })
          .then((res) => {
            this.tableData1 = res.data.Data;
            let rest = this.tableData1.filter((item) => item.address.indexOf(e) > -1);
            this.tableData = rest;
          })
          .catch((e) => {
            console.log("error", e);
          });
      }
    },

    testEvent(row) {
      var URL = row.address + "/z/time";
      let formData = new FormData();
      formData.append("action", "GetEvent");
      axios
        .post(URL, formData, { "Content-Type": "multipart/form-data" })
        .then((res) => {
          if (res.status == 200) {
            this.$message.success("测试连接成功!");
          } else {
            this.$message.error("测试连接失败!");
          }
        })
        .catch((e) => {
          this.$message.error("测试连接失败!");
        });
    },
    EditChange({ row, column, rowIndex }) {
      if (column.property == "codena") {
        row.inputcode = this.$pub.CreateInputcode(row.codena, this, 16);
      }
    },
  },
};
</script>

<style scoped>
.pagetop {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.diapagetop {
  width: 100%;
  height: 35px;
  -webkit-box-pack: left;
  -webkit-box-align: center;
}

.diapagecenter {
  height: 400px;
  width: 100%;
  display: flex;
}

.table-deal-btn {
  text-align: center;
  margin: auto 10px;
}

.table-deal-btn div {
  margin: 5px 0;
}

.middle-center {
  position: absolute;
  height: 100%;
  left: 0px;
  right: 0px;
  overflow: auto;
}

::v-deep .middle-center tr td div .el-input__inner {
  border: 1px solid rgba(255, 254, 254, 0) !important;
  background-color: rgba(255, 254, 254, 0) !important;
}

::v-deep .vxe-table .vxe-body--column.col-orange {
  background-color: #ccc;
}

::v-deep tr.vxe-body--row.row-modify {
  color: blue !important;
}
</style>
